<template>
	<view>
		<view class="by-list" v-if="groupBuys.length > 0">
			<view class="by-item" hover-class="sun-item--hover" @click="toBuyDetail(item)" v-for="item in groupBuys" :key="item.id">
				<view class="by-detail">
					<view class="by-name w-100">
						{{item.groupBuyTypeName}}
					</view>
					<view class="w-50">
						成团人数: {{item.needCount}} 人
					</view>
					<view class="w-50">
						当前人数: {{item.currentCount}} 人
					</view>
					<view class="w-50">
						开团日期: {{item.creationTime | formatDate}}
					</view>
					<view class="w-50">
						截止日期: {{item.endDate | formatDate}}
					</view>
				</view>
				<view class="iconfont">
					&#xe65f;
				</view>
			</view>
		</view>
		<view v-if="groupBuys.length==0" class="no-data">
			暂无数据
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupBuys:[]
			};
		},
		onLoad() {
			this.getGroup();
		},
		methods:{
			getGroup(){
				this.$http.get('/api/services/app/GroupBuy/GetAllMyList')
				.then(res=>{
					this.groupBuys = res.data.result;
				})
			},
			toBuyDetail(item){
				uni.navigateTo({
					url: '../group-detail/group-detail?group=' + encodeURIComponent(JSON.stringify(item))
				})
			},
		},
		computed:{
			user() {
				return this.$store.state.session.user;
			},
			hasLogin() {
				return this.$store.state.session.hasLogin;
			}
		}
	}
</script>

<style lang="scss">
.by-list{
		padding: 24rpx;
		.by-item {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: stretch;
			padding: 14rpx 0;
			border-bottom: 1px solid $uni-border-color;
			.by-detail {
				flex-grow: 1;
				display: flex;
				flex-wrap: wrap;
				font-size: 10px;
				color: #999999;
				.by-name {
					font-size: 14px;
					color: #333333;
				}
			}
			.btn {
				margin: 0;
				font-size: 14px;
				border: 0;
				border-radius: 0;
				width: 140rpx;
				color: #FFFFFF;
				padding: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.btn-detail {
				background-color: $uni-color-warning;
			}
			
			.btn-join {
				background-color: $uni-color-primary;
			}
			.iconfont {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
}
	
</style>
